<template>
	<!-- 我的团队 -->
	<view>
		<view class="head flex-cb bg-white">
			<view :class="{text:index == 1}" @click="handle(1)">直推
				<view v-if="index == 1"></view>
			</view>
			<view :class="{text:index == 2}" @click="handle(2)">间推
				<view v-if="index == 2"></view>
			</view>
		</view>
		<view class="title bg-white flex align-center">
			<image src="/static/icon.png" mode=""></image>
			<view class="text">
				您共有<text>{{index==1?list.length:list2.length}}个</text>{{index==1?'直推':'间推'}}
			</view>
		</view>
		<view v-if="index == 1">
			<scroll-view scroll-y="true" v-if="list.length != 0">
				<view v-for="(item,index) in list" :key="index" class="item flex-cb bg-white">
					<view class="user flex-cb">
						<image :src="item.avatar?url+item.avatar:'/static/logo.png'" mode=""></image>
						<view class="name">
							<view class="nichen">
								{{item.phone}}
								<view class="position flex-c">
									<view class="vip" v-if="item.vip_expire_time">
										会员
									</view>
									<view class="pt" v-else >
										普通
									</view>
								</view>
							</view>
							<view class="name_text">手机</view>
						</view>
					</view>
					<view class="time">
						<view class="ymd">{{item.created_at}}</view>
						<view class="zcsj">注册时间</view>
					</view>
				</view>
			</scroll-view>
			<nodata v-else />
		</view>
		<view v-if="index == 2">
			<scroll-view scroll-y="true" v-if="list2.length != 0">
				<view v-for="(item,index) in list2" :key="index" class="item flex-cb bg-white">
					<view class="user flex-cb">
						<image :src="item.avatar?url+item.avatar:'/static/logo.png'" mode=""></image>
						<view class="name">
							<view class="nichen">
								{{item.phone}}
								<view class="position flex-c">
									<view class="vip" v-if="item.vip_expire_time">
										会员
									</view>
									<view class="pt" v-else >
										普通
									</view>
								</view>
							</view>
							<view class="name_text">手机</view>
						</view>
					</view>
					<view class="time">
						<view class="ymd">{{item.created_at}}</view>
						<view class="zcsj">注册时间</view>
					</view>
				</view>
			</scroll-view>
			<nodata v-else />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url:'',
				index:1,
				info:'',
				page:1,
				limit:10,
				last_page:1,
				list:[],//直推
				list2:[],//间推
			};
		},
		onLoad() {
			this.url = this.$base
			this.getlist()
		},
		methods:{
			handle(i){
				this.index = i
			},
			// scrolltolower(){
			// 	if(this.page == this.last_page){
			// 		return
			// 	}else{
			// 		this.page++
			// 		this.getlist()
			// 	}
			// },
			getlist(){
				this.$api.teams({}).then(res=>{
					console.log(res);
					this.list = res.data.direct_users
					this.list2 = res.data.indirect_users
					// this.info = [...this.info,...res.list]
					for (let i = 0; i < this.list.length; i++) {
						this.list[i].created_at = this.list[i].created_at.slice(0,10)
						this.list[i].phone = this.$utils.phoneAk(this.list[i].phone)
					}
					for (let i = 0; i < this.list2.length; i++) {
						this.list2[i].created_at = this.list2[i].created_at.slice(0,10)
						this.list2[i].phone = this.$utils.phoneAk(this.list2[i].phone)
					}
					// this.last_page = res.last_page
				})
			}
		}
	}
</script>

<style lang="scss">
.head{
	height: 80rpx;
	font-weight: bold;
	padding: 39rpx 210rpx 13rpx 210rpx;
	color: #666666;
	font-size: 30rpx;
	view{
		position: relative;
		view{
			position: absolute;
			left: 0;top: 44rpx;bottom: 0;right: 0;
			margin: auto;
			height: 4rpx;
			width: 40rpx;
			border-radius: 2rpx;
			border: 2rpx solid #1CD699;
		}
	}
	.text{
		color: #333333;
	}
	
}
.title{
	margin: 20rpx 0;
	padding: 25rpx 30rpx;
	height: 80rpx;
	image{
		width: 30rpx;height: 30rpx;margin-right:10rpx ;
	}
	.text{
		font-size: 32rpx;
		color: #666666;
		text{
			color: #333;
		}
	}
}
.tab{
	background-color: #F8F8F8;
	height: 78rpx;
	padding: 0 49rpx 0 75rpx;
	font-size: 30rpx;
	font-weight: bold;
	color: #333;
}
scroll-view{
	height: calc(100vh - 220rpx);
	overflow: hidden;
	.item{
		height: 140rpx;padding: 30rpx;
		margin-bottom: 20rpx;
		.user{
			font-size: 28rpx;
			color: #333333;
			image{
				width: 80rpx;height: 80rpx;border-radius: 50%;margin-right: 10rpx;
			}
			.name{
				.nichen{
					height: 26rpx;
					position: relative;
					.position{
						position: absolute;
						top: 0;right: -69rpx;
						width: 60rpx;
						height: 34rpx;
						border-radius: 2rpx;
						overflow: hidden;
						padding: 5rpx;
						white-space: nowrap;
						border-radius: 5rpx;
						.vip{
							font-size: 22rpx;
							padding: 5rpx;
							background-color: rgb(274, 211, 71);
						}
						.pt{
							font-size: 22rpx;
							color: #FFF;
							opacity: 0;
							background-color: #B8B8B8;
						}
					}
				}
				.name_text{
					margin-top: 18rpx;
					color: #999;
				}
			}
		}
		.time{
			.zcsj{
				margin-top: 18rpx;
				color: #999999;
				
			}
		}
	}
}
</style>
